<template>
  <v-app>
    <v-navigation-drawer
      persistent
      clipped
      enable-resize-watcher
      fixed
      right
      app
    >
      <v-list>
        <nav-item v-for="(route, i) in routes" :key="i" :route="route"/>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      app
      clipped-left
      color="secondary"
      dark
    >
      <v-toolbar-title>
        <v-icon x-large>http</v-icon>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <router-view/>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import router from '@/router'
import NavItem from '@/components/NavItem'

export default {
  name: 'App',
  components: {NavItem},
  data () {
    return {
      drawer: true,
      routes: router.options.routes,
      // items: router.options.routes.map(route => ({title: route.name, icon: route.meta.icon})),
      title: 'Vuetify.js'
    }
  }
}
</script>

<style lang="scss">
code {
  display: block;
}
</style>
